$(function () {
    $("#jqGrid").jqGrid({
        url:baseURL+"sys/orLesson/list" ,
        datatype: "json",
        colModel: [
            { label: 'id', name: 'bannerId', width: 20,align:'center' , sortable: false},
            { label: '标题', name: 'title', width: 30,align:'center'},
            { label: '类型', name: 'type', width: 25,align:'center' , sortable: false,formatter:function (value,options,row){
                    return value==4?"首图":value==5?"初级课堂":"中级课堂";
                }},
            { label: '封面', name: 'imgUrl', width:30,align:'center' , sortable: false,formatter:function (value,options,row) {
                    return value==null?'-':'<a  onclick = "openImg(\''+value+'\')"> 查看图片 </a>';
                }},
            { label: '跳转地址', name: 'jumpUrl', width: 120,align:'center'},
            { label: '内容', name: 'content', width:100, align:'center' , sortable: false,formatter:function (value,options,row) {
                    return value==null?'-':'<a onclick ="openContent('+JSON.stringify(row).replace(/"/g, '&quot;')+')"> 内容预览 </a>';
                }},
            { label: '顺序', name: 'sort', width: 60,align:'center', sortable: false},
            { label: '状态', name: 'state', width: 40, align:'center' , sortable: false,formatter:function (value,options,row){
                    return value==1?"展示中":"隐藏";
                }}

        ],
		viewrecords: true,
        height: 375,
        rowNum: 10,
		rowList : [10,30,50],
        rownumbers: true, 
        rownumWidth: 25, 
        autowidth:true,
        multiselect:true,
        multiboxonly:true,
        pager: "#jqGridPager",
        jsonReader : {
            root: "page.list",
            page: "page.currPage",
            total: "page.totalPage",
            records: "page.totalCount"
        },
        prmNames : {
            page:"page", 
            rows:"limit", 
            order: "order"
        },
        gridComplete:function(){
        	//隐藏grid底部滚动条
        	$("#jqGrid").closest(".ui-jqgrid-bdiv").css({ "overflow-x" : "hidden" }); 
        }
    });
    vm.initTypes();

});

var ue=UE.getEditor('editor');

var vm = new Vue({
    el:'#rrapp',
    data:{
        q:{
            type:0,
            state:0
        },
        showList: true,
        showUpdate:false,
        title:null,
        lession:{
            lessionId:null,
            order:null,
            type:0,
            isShow:0,
            content:null,
            title:null,
            coverImg:null
        },
        banner:{
            bannerId:null,
            sort:null,
            type:0,
            state:0,
            content:null,
            title:null,
            jumpUrl:null,
            imgUrl:null
        },
        states:[
            {
                value:0,
                msg:"请选择"
            }
            ,{
                value:1,
                msg:"展示"
            },{
                value:2,
                msg:"隐藏"
            }
        ],
        types:[],


    },
    methods: {
        query: function () {
            vm.reload();
        },
        clean: function () {
            vm.showList = true;
            vm.showUpdate = false;
            vm.q = {
                type:0,
                state:0
            };
            vm.reload();
        },
        update: function () {
            var rowid=getSelectedRow();
            if(rowid==null){
                return;
            }
            var row = $("#jqGrid").jqGrid('getRowData', rowid);
            if(rowid==null){
                return;
            }
            let bannerId=row.bannerId;
            vm.showList = false;
            vm.showUpdate = true;
            vm.title = "修改";
            $.get(baseURL+"sys/orLesson/getById/"+bannerId,result=>{
                vm.banner=result.banner;
                ue.setContent(result.banner.content);
            })
        },
        modify: function () {
            if(vm.banner.bannerId==null || vm.banner.bannerId==''){
                vm.insert();
                return;
            }

            let content=ue.getContent();
            if(content!=null && content.length!=0){
                content=content.replace("<img","<img width='100%' height='auto'");
                vm.banner.content=content;

            }

           let bannerEls=$("#bannerImg").val();

           if(bannerEls==null || bannerEls ==''){
               vm.commitUpdate();
           }else{
               var formData=new FormData($("form")[1]);
               formData.append("file",$("#bannerImg")[0]);
               $.ajax({
                   url:baseURL+"sys/orBanner/uploadBanner",
                   datatype:'json' ,
                   type:'post',
                   data:formData,
                   cache:false,
                   traditional: true,
                   contentType: false,
                   processData: false,
                   success:function (msg) {

                       if(msg.url!=null && msg.url!=''){
                           vm.banner.imgUrl=msg.url;
                           vm.commitUpdate();
                       }
                   }

               })


           }

        },
        reload: function () {
            vm.showList = true;
            vm.showUpdate = false;
            $("#jqGrid").jqGrid('setGridParam', {
                postData: {
                    'type': vm.q.type,
                    'state': vm.q.state
                },
                page: 1
            }).trigger("reloadGrid");

        },
        commitUpdate:function () {

            $.ajax({
                url: baseURL + "sys/orLesson/update",
                type: "post",
                contentType: "application/json",
                data: JSON.stringify(vm.banner),
                success: function (r) {
                    if (r.code == 0) {
                        alert(r.msg);
                        vm.reload();
                    } else {
                        alert(r.msg)
                    }
                }
            })
        },
        add:function () {
            vm.showList = false;
            vm.showUpdate = true;
            vm.banner={
                bannerId:null,
                sort:null,
                type:0,
                state:0,
                content:null,
                title:null,
                jumpUrl:null,
                imgUrl:null
            };
            ue.setContent("");
            $("#bannerImg").val("");
            vm.title = "新增";
        },
        insert:function () {
            let bannerEls=$("#bannerImg").val();
            var formData=new FormData($("form")[1]);
            formData.append("file",$("#bannerImg")[0]);
            if(bannerEls==null || bannerEls ==''){
                layer.msg("请选择封面图");
                return;
            }
            if(vm.banner.title==0){
                layer.msg("请填写标题");
                return;
            }
            if(vm.banner.type==0){
                layer.msg("请选择类型");
                return;
            }
            if(vm.banner.state==0){
                layer.msg("请选择状态");
                return;
            }
            //为图片添加宽度自适应
            let content=ue.getContent();
            content=content.replace("<img","<img width='100%' height='auto'");
            vm.banner.content=content;
            $.ajax({
                url:baseURL+"sys/orBanner/uploadBanner",
                datatype:'json' ,
                type:'post',
                data:formData,
                cache:false,
                traditional: true,
                contentType: false,
                processData: false,
                success:function (msg) {
                    console.log(msg.url);
                    if(msg.url!=null && msg.url!=''){
                        vm.banner.imgUrl=msg.url;
                        $.ajax({
                            url: baseURL + "sys/orLesson/add",
                            type: "post",
                            contentType: "application/json",
                            data: JSON.stringify(vm.banner),
                            success: function (r) {
                                if (r.code == 0) {
                                    alert(r.msg);
                                    vm.reload();
                                } else {
                                    alert(r.msg)
                                }
                            }
                        })
                    }
                }

            })
        }, initTypes(){
            $.get(baseURL+"sys/discoverImg/getTypes/"+2,r=>{
                vm.$set(vm.types,0,{
                    type:"0",
                    name:"类型选择"
                })
                for (let i=0;i<r.types.length;i++){
                    vm.$set(vm.types,(i+1),r.types[i])

                }
            })
        }

    }
});

//弹窗显示内容
function  openContent(row) {
    $("#content").html(row.content);
    layer.open({
        type:1,
        title:"内容预览",
        content:$("#content"),
        btn:['确定'],
        area:['392px','716px'],
        btn1:function (index) {
            $("#content").html("");
            layer.close(index);
        }

    })

}

//打开图片
function openImg(src){

    $("#goodsImg").attr("src",src);

    layer.open({
        type:1,
        title:"请选择",
        content:$("#goodsImg"),
        btn:['确定'],
        area:['720px','640px'],
        btn1:function (index) {
            layer.close(index);
        }

    })
}